<section>
  <div class="row">
    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center icon-warning">
                  <img src="https://cdn.komiser.io/images/services/gcp/compute.png" class="gcp-logo" />
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Running VM Instances</p>
                <h4 class="card-title" *ngIf="!loadingRunningInstances">{{runningVMInstances}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingRunningInstances"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                  <img src="https://cdn.komiser.io/images/services/gcp/compute.png" class="gcp-logo" />
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Stopped VM Instances</p>
                <h4 class="card-title" *ngIf="!loadingStoppedInstances">{{stoppedVMInstances}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingStoppedInstances"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                  <img src="https://cdn.komiser.io/images/services/gcp/image.png" class="gcp-logo" />
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Images</p>
                <h4 class="card-title" *ngIf="!loadingImages">{{images}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingImages"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">CPU Usage</h4>
          <p class="card-category">Underutilized VM Instances</p>
        </div>
        <div class="card-body">
          <table class="table mt-3">
            <thead>
              <tr>
                <th style="width:300px">Name</th>
                <th>CPU Utilization</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let instance of returnedInstancesWithCPUUtilization">
                <td class="limit-column">{{instance.name}}</td>
                <td>
                  <ngx-trend autoDraw="true" autoDrawDuration="3000" autoDrawEasing="ease-out" smooth="true" [gradient]="['#2196F3']" radius="18.5"
                    strokeWidth="0.8" strokeLinecap="round" [data]="instance.series" title="{{instance.series[instance.series.length - 1]}}%"></ngx-trend>
                </td>
              </tr>
            </tbody>
          </table>
          <pagination [totalItems]="instancesWithCPUUtilization.length" [itemsPerPage]="3" (pageChanged)="pageChanged($event)" [maxSize]="3"
            size="sm"></pagination>
        </div>
      </div>

    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Public vs Private Instances</h4>
          <p class="card-category">Instances with Public IP Address</p>
        </div>
        <div class="card-body">
          <div class="loader" *ngIf="loadingInstancesPrivacyChart">Loading...</div>
          <canvas class="chart-circle mt-4 mb-3" id="instancesPrivacyChart"></canvas>
        </div>
        <div class="card-footer">
          <div class="legend">
            <i class="la la-circle text-primary"></i> Public Instances
            <i class="la la-circle text-success" style="margin-left: 10px"></i> Private Instances
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Compute Instance Machine Types</h4>
          <p class="card-category">Running VM Instances per Machine Type</p>
        </div>
        <div class="card-body">
          <div class="loader" *ngIf="loadingInstancesFamilyChart">Loading...</div>
          <canvas class="chart-circle mt-4 mb-3" id="instancesFamilyChart" style="max-height:275px"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="card card-stats card-primary card-golang">
        <div class="card-body">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <i class="devicon-go-plain"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Golang Functions</p>
                <h4 class="card-title" *ngIf="!loadingCloudFunctions">{{cloudFunctions.golang}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingCloudFunctions"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-stats card-warning card-python">
        <div class="card-body">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <i class="devicon-python-plain"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Python Functions</p>
                <h4 class="card-title" *ngIf="!loadingCloudFunctions">{{cloudFunctions.python}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingCloudFunctions"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-stats card-success">
        <div class="card-body">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <i class="devicon-nodejs-plain"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Node.JS Functions</p>
                <h4 class="card-title" *ngIf="!loadingCloudFunctions">{{cloudFunctions.node}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingCloudFunctions"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <img src="https://cdn.komiser.io/images/services/aws/kube.png" class="service-logo" style="padding-bottom: 12px" />
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Kubernetes Clusters</p>
                <h4 class="card-title" *ngIf="!loadingKubernetesClusters">{{kubernetesClusters}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingKubernetesClusters"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card card-stats">
        <div class="card-body">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <img src="https://cdn.komiser.io/images/services/aws/kube.png" class="service-logo" style="padding-bottom: 12px" />
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Kubernetes Nodes</p>
                <h4 class="card-title" *ngIf="!loadingKubernetesNodes">{{kubernetesNodes}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingKubernetesNodes"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Kubernetes Clusters</h4>
          <p class="card-category">Number of Clusters by Region</p>
        </div>
        <div class="card-body">
          <div class="kubeclustersmap">
            <div class="map">
              <span>Alternative content for the map</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">GAE Applications</h4>
          <p class="card-category">Delta count of outgoing network bandwidth.</p>
        </div>
        <div class="card-body">
          <div id="gaeBandwidthChart">
            <div class="loader" *ngIf="loadingGaeBandwidthChart">Loading...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>